




var FilterableProductTable = React.createClass({
  render: function(){
    return (
        <div className="search">
          <SearchBar />
          <ProductTable product={this.props.product} ></ProductTable>
        </div>
      )
      
     
  }
});

var SearchBar = React.createClass({
  render:function(){
     return (
          <div className="form">
            <input type="text" placeholder="what you wanna search" />
          </div>
      )
  }
})




var ProductTable = React.createClass({
  render:function(){
      var rows = [];
      var lastCategory = null;
      this.props.product.forEach(function(product){
        console.log(product);
          if(product.category != lastCategory){
            rows.push(<ProductCategoryRow category={product.category} key={product.category} />)
          }
          rows.push(<ProductRow product={product} key={product.name} />);
          lastCategory = product.category;
      });

      return (
        <table>
          <thead>
          <tr>
            <th>Name</th>
            <th>Price</th>
          </tr>
          </thead>
          <tbody>{rows}</tbody>
        </table>
  

      )
  }
})

var ProductCategoryRow = React.createClass({
  render:function(){
    return (<tr><th colSpan="2">{this.props.category}</th></tr>);

  }
})

var ProductRow = React.createClass({
  render:function(){
    var name = this.props.product.stocked ? this.props.product.name : <span style={{color: 'red'}}> {this.props.product.name} </span>;
      
    return (
      <tr>
        <td>{name}</td>
        <td>{this.props.product.price}</td>
      </tr>
    );
  
  }
})

var product = [
    { category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football" },
    { category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball" },
    { category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball" },
    { category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch" },
    { category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5" },
    { category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7" },
    { category: "nike", price: "$199.99", stocked: true, name: "sdf" },
    { category: "nike", price: "$199.99", stocked: false, name: "sfeg 7" },
    { category: "nike", price: "$199.99", stocked: true, name: "fhff 7" }
];

ReactDOM.render(<FilterableProductTable product={product}/>,document.getElementById('content'))
